<template>
  <div class="attr-item">
    <div class="attr-item-label required">
      <span>{{ title }}</span>
    </div>
    <div class="attr-item-value">
      <a-select v-model:value="curResult" :options="appIdOptions" />
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref } from 'vue'

import { useAxiosResponse } from '@/api'
import { api } from '@/api/factory/sysFactory'
import { useRoute } from 'vue-router'
import { BwPageResultOutputSysApplicationAppGetListOutput } from '@bitwit/tenantapi'
import { TableColumnConfigSelectOptionsModel } from '../../tableColumnConfig/model'

export default defineComponent({
  name: 'BwFilterTableLinkApp',
  components: {},
  props: {
    title: {
      type: String,
    },
    value: {
      type: [String, Number],
    },
  },
  emits: ['update:value', 'change'],
  setup(props, { emit }) {
    /** 对象值 */
    const curResult = computed({
      get: (): string | number | undefined => {
        return props.value
      },
      set: (value) => {
        emit('update:value', value)
        emit('change', value)
      },
    })

    const appIdOptions = ref<TableColumnConfigSelectOptionsModel[]>([])

    const route = useRoute()
    const onGetLinkAppOptions = () => {
      const { appId } = route.params
      api.apiSysApplicationGetListPost().then((res) => {
        const resData =
          useAxiosResponse<BwPageResultOutputSysApplicationAppGetListOutput>(
            res
          )
        appIdOptions.value =
          resData?.rows?.map((item) => ({
            label: item.name ?? '未命名应用',
            value: item.id?.toString() ?? '',
          })) ?? []

        if (!curResult.value) {
          curResult.value = appId?.toString()
        }
      })
    }

    onMounted(() => {
      onGetLinkAppOptions()
    })

    return { curResult, appIdOptions }
  },
})
</script>

<style lang="less" scoped>
.attr-item {
  display: flex;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid #e5e6e8;

  .attr-item-label {
    width: 90px;
    line-height: 32px;
    text-align: left;
  }

  .attr-item-value {
    flex: 1;
    .ant-select {
      width: 100%;
    }
  }

  .required:after {
    color: red;
    content: '*';
  }
}
</style>
